<template>
	<view class="wrap">
		<uni-nav-bar title="店铺信息" left-icon="back" @clickLeft="handleBack" :border="false" :fixed="true"
			:status-bar="true" :background-color="navBg"></uni-nav-bar>

		<view class="" v-if="detail">
			<image :src="handleUrl(detail.doorHead)" mode="aspectFill" class="doorHead"></image>
			<view class="px-20 py-28 text-FFF flex items-center justify-between"
				style="background: linear-gradient( 180deg, #FF561D 33%, #FF0064 100%);">
				<view class="flex items-center">
					<image :src="handleUrl(detail.logo)" class="logo round-8" mode=""></image>
					<view class=" text-28 ml-20">
						<view class="font-700 text-32">
							{{ detail.name }}
						</view>
						<view class="mt-12">
							共{{ total }}件商品
						</view>
					</view>
				</view>
				<view class="flex flex-col items-center">
					<view class="collection-box px-20 flex items-center justify-between" @click="collection">
						<u-icon :name="detail.isCollect == 1 ? 'star-fill' : 'star'" color="#FFF" size="40rpx"></u-icon>
						<view class="text-28 text-FFF">
							收藏
						</view>
					</view>
					<!-- #ifdef MP-WEIXIN -->
					<view class="share-btn-wrap mt-20">
						<button open-type="share" class="share-btn"></button>
						<image src="https://file.fulewanjia.com/fulewanjia/profile/appImages/common/share-white.png"
							style="width: 40rpx;" mode="widthFix"></image>
					</view>
					<!-- #endif -->
				</view>

			</view>

			<view class="bg-FFF py-32 px-20">
				<u-subsection :list="subsection" :current="subsectionIndex" active-color="#FFF" bg-color="#F8F8F8"
					@change="sectionChange" fontSize="32rpx"></u-subsection>
			</view>

			<view class="" v-if="subsectionIndex == 0">
				<view class="flex items-center justify-between py-16 bg-FFF px-20">
					<view class="text-32 flex items-center" v-for="(item, index) in screenList" :key="item.name"
						@click="screenClick(index)">
						<view class="" :style="{
							fontWeight: index == screenIndex ? '700' : '400'
						}">
							{{ item.name }}
						</view>
						<image :src="`https://file.fulewanjia.com/fulewanjia/profile/appImg/index/${item.image()}`"
							class="image-20" mode="" v-if="item.name == '价格'"></image>
					</view>
				</view>

				<view class="mt-28 px-20">
					<ProductsList :params="params" ref="ProductsList" @changeTotal="changeTotal" :width="710">
					</ProductsList>
				</view>
			</view>

			<view class="px-20" v-else>
				<view class="flex items-center mt-28">
					<image :src="item" mode="" v-for="(item, index) in detail.inDoorOne" :key="index"
						class="image-144 round-8 mr-28" @click="showImage(index)"></image>
				</view>
				<view class="py-32 px-32 bg-FFF mt-24 round-8">
					<view class="text-32 font-700">
						店铺信息
					</view>
					<view class="flex items-center mt-24 justify-between">
						<view class="flex items-center" @click="goMap">
							<image src="https://file.fulewanjia.com/fulewanjia/profile/appImg/index/icon_dingwei@2x.png"
								class="image-28" mode=""></image>
							<view class="text-24 font-700 ml-12">
								{{ detail.address }}
							</view>
						</view>
						<view class="flex flex-col items-center" @click="phone">
							<image
								src="https://file.fulewanjia.com/fulewanjia/profile/appImg/index/icon_dianhua_s@2x.png"
								class="image-56" mode=""></image>
							<view class="text-24 mt-12">
								电话
							</view>
						</view>
					</view>
				</view>
				<view class="px-32 py-32 round-8 bg-FFF mt-32">
					<view class="text-32 font-700 ">
						店铺介绍
					</view>

					<view class="mt-28 text-28">
						{{ detail.detail }}
					</view>
				</view>
			</view>
		</view>

		<view class="" style="height: 200rpx;">

		</view>

		<image src="https://file.fulewanjia.com/fulewanjia/profile/appImages5/icon_gouwuche 2@2x.png" class="cart-img"
			mode="" @click="$tab.nav(`/pages/shoppingCart?storeId=${storeId}`)"></image>
	</view>
</template>

<script>
export default {
	data() {
		return {
			storeId: null,
			detail: null,
			total: 0,
			subsection: [
				'店铺商品',
				'商家信息'
			],
			subsectionIndex: 0,
			screenList: [{
				name: "综合",
				value: ""
			},
			{
				name: "最新",
				value: 4
			},
			{
				name: "销量",
				value: 3
			},
			{
				name: "价格",
				value: 1,
				image: () => {
					return this.screenIndex == 3 ? (this.screenList[3].value == 1 ?
						'icon_jiage_zhengxu@2x.png' : 'icon_jiage_zhengxu.png') :
						'icon_jiage_zhengxuh.png'
				}
			}
			],
			screenIndex: 0,
			params: {},
			navBg: "transparent",
			globalConfig: getApp().globalData.config,
			isShare: false
		};
	},
	onLoad(e) {
		// #ifdef MP-WEIXIN
		wx.showShareMenu({
			withShareTicket: true,
			menus: ['shareAppMessage', 'shareTimeline']
		})
		// #endif

		this.storeId = e.id
		this.params = {
			storeId: e.id
		}
		this.getData()

		if (e && e.isShare) {
			this.isShare = true
		} else {
			this.isShare = false
		}
	},
	onReachBottom() {
		this.$refs.ProductsList.loadList()
	},
	onShareAppMessage(res) {
		let pages = getCurrentPages(); //获取当前页面栈的信息
		let currentPage = pages[pages.length - 1]; //获取到当前页面栈中最后一个页面的索引
		return {
			title: this.detail.name,
			path: currentPage.route +
				`?id=${this.storeId}&isShare=true` //后面是路径上要传递的参数
		}
	},
	onPageScroll(e) {
		if (e.scrollTop > 100) {
			this.navBg = "#FFF"
		} else {
			this.navBg = "transparent"
		}
	},
	methods: {
		handleUrl(url) {
			if (url.indexOf('http://') !== -1 || url.indexOf('https://') !== -1) {
				return url
			} else {
				return this.globalConfig.imagePrefix + url
			}
		},
		handleBack() {
			if (this.isShare) {
				uni.switchTab({
					url: "/pages/indexPage"
				})
			} else {
				this.$tab.back()
			}
		},
		changeTotal(e) {
			this.total = e
		},
		showImage(current) {
			uni.previewImage({
				urls: this.detail.inDoorOne,
				current
			})
		},
		goMap() {
			uni.openLocation({
				latitude: Number(this.detail.latitude),
				longitude: Number(this.detail.longitude),
				name: this.detail.name,
				address: this.detail.address,
				success: function (res) { console.log('打开系统位置地图成功') },
				fail: function (error) { console.log(error) },
			})
			// this.detail.longitude = "39.96554";
			// this.detail.latitude = "116.403983";
			// uni.navigateTo({
			// 	url: `map?longitude=${this.detail.longitude}&latitude=${this.detail.latitude}`
			// })
		},
		phone() {
			this.$modal.confirm('确认拨打电话给商家吗?').then(con => {
				if (con) {
					uni.makePhoneCall({
						phoneNumber: this.detail.linkerMobile
					})
				}
			})
		},
		collection() {
			if (this.detail.isCollect == 1) {
				this.$Api.index.cancelCollection({
					colType: 1,
					relateId: this.storeId
				}).then(res => {
					this.getData(true)
				})
			} else {
				this.$Api.index.addCollection({
					colType: 1,
					relateId: this.storeId
				}).then(res => {
					this.getData(true)
					uni.$u.toast('收藏成功');
				})
			}

			this.getData()
		},
		screenClick(index) {
			this.screenIndex = index
			if (index == 3) {
				this.screenList[3].value = this.screenList[3].value == 2 ? 1 : 2
			}
			this.params = {
				...this.params,
				orderByWay: this.screenList[index].value
			}
		},
		sectionChange(index) {
			this.subsectionIndex = index;
		},
		async getData() {
			const detail = await this.$Api.index.getStoreInfo(this.storeId)
			this.detail = detail.data
			this.detail.inDoorOne = this.detail.inDoorOne.split(',')
			this.detail.inDoorOne = this.detail.inDoorOne.map(item => {
				return this.handleUrl(item)
			})
		}
	}
}
</script>

<style>
page {
	background-color: #F8F8F8;
}
</style>

<style lang="scss">
/deep/ .uni-navbar {
	width: 100%;
	position: fixed;
	left: 0;
	top: 0;
	z-index: 999;
}

/deep/.u-subsection--button__bar {
	background: linear-gradient(180deg, #FF561D 33%, #FF0064 100%) !important;
	color: #FFF !important;
}

.wrap {
	font-size: 0;
}

.doorHead {
	width: 750rpx;
	height: 750rpx;
}

.logo {
	width: 96rpx;
	height: 96rpx;
}

.collection-box {
	width: 146rpx;
	height: 56rpx;
	border-radius: 78rpx;
	border: 2rpx solid #FFF;
}

.share-btn-wrap {
	width: 40rpx;
	height: 40rpx;
	position: relative;

	.share-btn {
		width: 40rpx;
		height: 40rpx;
		border: none;
		border-color: transparent;
		background: none !important;
		position: absolute;
		left: 0;
		top: 0;
		z-index: 1;

		&:after {
			border: none;
			background: none !important;
		}
	}
}

.cart-img {
	width: 112rpx;
	height: 112rpx;
	position: fixed;
	right: 20rpx;
	bottom: 160rpx;
}
</style>